<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <input type="button" value="按钮" @click="changeMsg">
        {{msg}}
    </div>
    <script>
        //双向数据绑定： vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。数据发生变化，视图跟着变化，视图变化了数据也随之变化

        // 2、核心Object.defineProperty()这个方法

        // 3、Object.defineProperty()的用法
        // 语法：Object.defineProperty(obj,prop,{})
        // obj  检测的对象
        // prop 要定义或者修改的属性
        // {} 具体改变的方法  get方法和set方法

        var obj = {
            username: "好谷"
        }
        //对象中有username属性，就是修改
        Object.defineProperty(obj, "username", {
            value: "好谷就业力"
        })
        //对象中没有age属性，可以添加属性并且复制
        Object.defineProperty(obj, "age", {
            value: "18"
        })

        Object.defineProperty(obj, "sex", {
            get: function () {
                console.log("get方法执行了");
            },
            set: function (newVal) {
                console.log("set方法执行了---" + newVal);
            }
        })
        console.log(obj);
        obj.sex
        obj.sex = "男"


        new Vue({
            el: "#app",
            data: {
                msg: "haogu",
                text: "好谷"
            },
            methods: {
                changeMsg() {
                    this.msg = "修改后的数据msg"
                }
            },
            mounted() {
                console.log(this);

            }
        })
    </script>
</body>

</html>